<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜品汇总表"
      row-key="id"
      :show-summary="true"
      :columns="columns"
      :request-api="getPageReport"
      :summary-method="getSummaries"
      :data-callback="dataCallback"
      :init-param="initData"
    >
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="summaryTable">
import { ref, reactive } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";

const proTable = ref<ProTableInstance>();
const initData = reactive({
  reportId: 104
});

const columns: ColumnProps<Inventory.ResCustomList>[] = [
  {
    type: "index",
    label: "序号",
    width: 80,
    search: {
      el: "date-picker",
      label: "日期",
      minWidth: 164,
      key: "dataTimeRange",
      defaultValue: [formatDate(-1, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },
  {
    sortable: true,
    prop: "columnTypes",
    label: "统计条件",
    minWidth: 120,
    align: "left",
    isShow: false,
    enum: [
      { label: "按部门", value: 3 },
      { label: "按菜品分类", value: 4 },
      { label: "按菜品名称", value: 5 },
      { label: "按菜品规格", value: 6 }
    ],
    search: { el: "select", defaultValue: 3 }
  },
  { sortable: true, prop: "departName", label: "部门名称", minWidth: 120, align: "left" },
  { sortable: true, prop: "foodCategoryName", label: "分类名称", minWidth: 120, isShow: false, align: "left" },
  { sortable: true, prop: "foodName", label: "菜品名称", minWidth: 120, isShow: false, align: "left" },
  { sortable: true, prop: "specName", label: "规格名称", minWidth: 120, isShow: false, align: "left" },
  { sortable: true, prop: "quantity", label: "数量", minWidth: 240 },
  { sortable: true, prop: "amount", label: "原金额", minWidth: 120, align: "left" },
  { sortable: true, prop: "discountAmount", label: "优惠金额", minWidth: 120, align: "left" },
  { sortable: true, prop: "realAmount", label: "实收金额", minWidth: 120, align: "left" },
  { sortable: true, prop: "avgRealPrice", label: "平均实价", minWidth: 120 },
  { sortable: true, prop: "taskAmount", label: "做法加价", minWidth: 120, align: "left" },
  { sortable: true, prop: "feedAmount", label: "加料加价", minWidth: 120, align: "left" }
];

const summary = ref([]);
const dataCallback = (data: any) => {
  if (proTable.value!.searchParam.columnTypes === 3) {
    columns[2].isShow = true;
    columns[3].isShow = false;
    columns[4].isShow = false;
    columns[5].isShow = false;
  } else if (proTable.value!.searchParam.columnTypes === 4) {
    columns[2].isShow = false;
    columns[3].isShow = true;
    columns[4].isShow = false;
    columns[5].isShow = false;
  } else if (proTable.value!.searchParam.columnTypes === 5) {
    columns[2].isShow = false;
    columns[3].isShow = false;
    columns[4].isShow = true;
    columns[5].isShow = false;
  } else if (proTable.value!.searchParam.columnTypes === 6) {
    columns[2].isShow = false;
    columns[3].isShow = false;
    columns[4].isShow = true;
    columns[5].isShow = true;
  }
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

const getSummaries = param => {
  const { columns } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    sums[index] = summary.value[index];
    return sums;
  });
  return sums;
};
</script>
